import React, { Component } from 'react'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchTitle,
  SearchChange,
  SearchList,
  SearchItem
} from './style'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { actionCreator } from './store/'

class Header extends Component {
  constructor(props) {
    super(props)
    this.showSearchInfo = this.showSearchInfo.bind(this)
  }
  render() {
    const { focus, handleInputFocus, handleInputBlur, list } = this.props
    return (
      <HeaderWrapper>
        <Logo href="/" />
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载APP</NavItem>
          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <NavItem className="right">登录</NavItem>
          <SearchWrapper>
            <CSSTransition in={focus} classNames="slide" timeout={200}>
              <NavSearch
                onFocus={() => {
                  handleInputFocus(list)
                }}
                onBlur={handleInputBlur}
                className={focus ? 'active' : ''}
              />
            </CSSTransition>
            <i className={focus ? 'active iconfont zoom' : 'iconfont zoom'}>
              &#xe63b;
            </i>
            {this.showSearchInfo()}
          </SearchWrapper>
          <Addition>
            <Button className="writing">
              <i className="iconfont">&#xe606;</i>
              写文章
            </Button>
            <Button className="reg">注册</Button>
          </Addition>
        </Nav>
      </HeaderWrapper>
    )
  }
  showSearchInfo() {
    const {
      focus,
      enter,
      list,
      page,
      totalPage,
      handleClick,
      handleMouseEnter,
      handleMouseLeave
    } = this.props
    let newList = list.toJS()
    let pageList = []
    if (newList.length) {
      for (let i = (page - 1) * 10; i < page * 10 && i < newList.length; i++) {
        pageList.push(<SearchItem key={newList[i]}>{newList[i]}</SearchItem>)
      }
    }
    if (focus || enter) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchTitle>
            热门搜索
            <SearchChange
              onClick={() => {
                handleClick(page, totalPage, this.spinIcon)
              }}
            >
              <i
                ref={spin => {
                  this.spinIcon = spin
                }}
                className="iconfont spin"
              >
                &#xe851;
              </i>
              换一批
            </SearchChange>
          </SearchTitle>
          <SearchList>{pageList}</SearchList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
}

const mapStateToProps = state => {
  return {
    focus: state.get('header').get('focus'),
    list: state.get('header').get('list'),
    page: state.get('header').get('page'),
    enter: state.get('header').get('enter'),
    totalPage: state.get('header').get('totalPage')
  }
}
const mapDispatchToProps = dispatch => {
  return {
    handleInputFocus(list) {
      if(list.size === 0) {
        dispatch(actionCreator.getSearchList())
      }
      dispatch(actionCreator.changeToFocusAction())
    },
    handleInputBlur() {
      dispatch(actionCreator.changeToBlurAction())
    },
    handleMouseEnter() {
      dispatch(actionCreator.changeToEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreator.changeToLeave())
    },
    handleClick(page, totalPage, spin) {
      let deg = spin.style.transform.replace(/[^0-9]/gi, '')
      if (deg) {
        deg = parseInt(deg, 10) + 360
      } else {
        deg = 360
      }
      spin.style.transform = `rotate(${deg}deg)`
      
      if (page === totalPage) {
        page = 1
      } else {
        page++
      }
      dispatch(actionCreator.changePage(page))
    }
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Header)
